<template>
	<div class="land">
		<h1 class="title">登录</h1>
		<div class="content">
			<div class="mess">
					<input class="left" type="text" v-model="phoneNumber" placeholder="请输入手机号码" style="width:350px;height:30px">
				<!-- <input class="left" type="text" v-model="phoneNumber" @focus="phoneNumberInput" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" ID="Text2" NAME="Text2">
				<span class="right"></span> -->
			</div>
			<!-- <div class="code">
				<input class="left" type="text" placeholder="请输入右边验证码">
				<span class="right"></span>
			</div> -->
			<div class="pass">
				    <input class="left" type="password" v-model="passWord"  placeholder="请输入登录密码" style="width:350px;height:30px">
				<!-- <span class="right"></span> -->
			</div>
			<div class="backPass">
				<router-link to="/findpassword">忘记密码？</router-link>
			</div>
		</div>
		<div class="reset" @click="login">登录</div>
		<div class="zc">
			<router-link to="/register">没有账号，点击注册</router-link>
		</div>
	</div>
</template>

<script>

// 引入这个页面需要的方法库
import {mapGetters, mapMutations} from 'vuex'
import {login, getToken} from 'api/api'
import axios from 'axios'
	/* eslint-disable */
	export default {
		data: () => {
		  return {
			phoneNumber: '',
			passWord: '',
			time: '',
	        timeText: '',
	        flightNo: ''
		  }
		},
    computed: {
      ...mapGetters([
        'publicToken'
      ])
	},
	mounted () {
    // 在loading页面获取公共Token，
    // 如果公共Token不为空则跳转到登陆页
    axios.get(getToken, {
      params:{
        client_id: 'wc-client',
        client_secret: 'cmPUgWgqFI8',
        grant_type: 'client_credentials',
        scope: 'pub_api'
      }
    }).then((res) => {
      console.log(res.data.access_token)
      let publicToken = res.data.access_token
      this.setPublicToken(publicToken)
      if (publicToken !== '' && publicToken !== undefined) {
        console.log('test token22')
      }
    }).catch(error => {
      console.log(error)
    })
  },
        methods: {
            // 正则
            phoneNum(){
                if(!/^1[3|4|5|7|8][0-9]{9}$/.test(this.phoneNumber)){
                    this.$createToast({ time:700, type:'warn', txt: '请输入正确手机号' }).show()
                }
            },
            // 弹出层
            showPopup(refId) {
                const component = this.$refs[refId];
                component.show();
                setTimeout(() => {
                    component.hide();
                }, 3000);
            },
            // 点击登陆的时候发送的请求
            // test => new FormData
            // publicToken微信公众号的
            login() {
                // this.$router.push('/getIntimate')
                // 获取token
				const _this = this
                axios
                    .get(getToken, {
                        params: {
                            client_secret: "cmPUgWgqFI8",
                            grant_type: "password",
                            scope: "pub_api,biz_api,acc_api",
                            username: this.phoneNumber,
                            password: this.passWord,
                            client_id: "wc-client"
                        }
                    })
                    .then(res => {
                        console.log(res.data);
                        localStorage.setItem("token", res.data.access_token);
                        if (
                            res.data.access_token !== "" &&
                            res.data.access_token !== undefined
                        ) {
                            let pub = res.data.access_token;
                            this.setPublicToken(pub);
                            // this.$router.push('/index')
                            // 登录
                            let loginAddress = login + "?access_token=" + this.publicToken;
                            axios
                                .post(loginAddress, {
                                    param: {
                                        fields: {
                                            phone: this.phoneNumber,
                                            password: this.passWord,
                                            device: "849ed1caf7a19b1",
                                            deviceInfo: "info"
                                        }
                                    }
                                })
                                .then(res => {
                                    console.log(res);
                                    if (res.data.code === 200) {
                                        this.$createToast({ time:700, type:'warn', txt: '登录成功' }).show()
                                        localStorage.setItem("userId", res.data.result.id);
                                        let userId = res.data.result.id;
                                        console.log(userId + "用户id");
                                        let username = this.phoneNumber;
                                        let password = this.passWord;
                                        this.setUserName(username);
                                        this.setPassWord(password);
                                        this.setOrderName(username);
                                        this.setOrderPhone(username);
                                        this.setUserId(userId);
                                    }
                                    this.$createToast({ time:700, type:'correct', txt: '登录成功' }).show()
                                    setTimeout(function () {
                                        _this.$router.push("/index");
                                    },2000)
                                })
                                .catch(error => {
                                    console.log(error);
                                });
                        }
                    })
                    .catch(error => {
                        this.$createToast({ time:700, type:'warn', txt: '账号或密码不正确' }).show()
                        console.log(error);
                    });
            },
            ...mapMutations({
                setUserName: "SET_USERNAME",
                setPassWord: "SET_PASSWORD",
                setPublicToken: "SET_PUBLICTOKEN",
                setUserId: "SET_USERID",
                setOrderName: "SET_ORDERNAME",
				setOrderPhone: "SET_ORDERPHONE",
            })
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	.land
		padding: 0 1rem;
	.title
		font-family: PingFang-SC-Medium;
		font-size: 1.2rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 4rem;
		letter-spacing: 0rem;
		color: #333333;
		text-align: cente;
	.content
		margin-top: 4rem;
	.mess
		overflow: hidden
		border-bottom: 1px solid #d1d1d1;
		padding: 1px 1px 0.5rem;
	.mess .left
		float: left
		line-height: 2rem
		width: 14rem
		font-family: PingFang-SC-Regular
		font-weight: normal
		font-stretch: normal
		letter-spacing: 0rem
		color: #333333
		padding-left: 5px
	.mess .right
		float: right
		width: 1rem
		height: 1rem
		background-size: 1rem 1rem
		margin-top: 0.5rem
	.code,
	.pass,
	.surePass {
		overflow: hidden;
		padding: 1rem 0;
	}
	.code .left {
		float: left;
		width: 65%;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		font-stretch: normal;
		line-height: 2rem;
		letter-spacing: 0rem;
		color: #333333;
		margin: 2px;
		padding-left: 5px;
	}
	.code .right {
		float: right;
		width: 4rem;
		height: 2rem;
		background-size: 4rem 2rem;
		margin-top: 0.5rem;
	}
	.pass .left {
		float: left;
		width: 90%;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		font-stretch: normal;
		line-height: 2rem;
		letter-spacing: 0rem;
		color: #333333;
		margin: 2px;
		padding-left: 5px;
	}
	.pass .right {
		float: right;
		width: 1rem;
		height: 1rem;
		background-size: 1rem 1rem;
		margin-top: 0.5rem;
	}
	.surePass .left {
		float: left;
		width: 90%;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		font-stretch: normal;
		line-height: 2rem;
		letter-spacing: 0rem;
		color: #333333;
		margin: 2px;
		padding-left: 5px;
	}
	.surePass .right {
		float: right;
		width: 1rem;
		height: 1rem;
		background-size: 1rem 1rem;
		margin-top: 0.5rem;
	}
	.backPass {
		margin-top: 1.5rem;
		text-align: right;
	}
	.backPass a {
		text-decoration: underline;
	}
	.reset {
		width: 80%;
    	height: 3rem;
    	background-color: #333;
    	border-radius: 3rem;
    	margin: 3rem auto 0;
    	color: #fff;
    	line-height: 3rem;
    	font-size: 1rem;
	}
	.zc {
		width: 100%;
		text-align: center;
		text-decoration: underline;
		margin-top: 6rem;
		color: #333333;
	}
	.code, .pass{
		border-bottom: 1px solid #ccc;
	}
	input {
		outline: none
	}
</style>